<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mapState辅助函数</title>
    <!--引入Vue库-->
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 1,
        },
      });
      // 创建一个counter组件
      const counter = {
        template: `<div>{{ count }}</div>`,
        computed: {
          count() {
            return store.state.count;
          },
        },
      };
      var mapState1 = Vuex.mapState;
      const vm = new Vue({
        el: "#app",
        // 把store对象提供给“store”选项，这可以把store的实例注入所有的子组件
        store,
        computed: mapState1({
          // 箭头函数可使代码更简练
          count: (state) => state.count,
          // 传字符串参数'count'等同于`state=>state.count`
          countAlias: "count",
          // 为了能够使用`this`获取局部状态，必须使用常规函数
          countPlusLocalState(state) {
            return state.count + this.localCount;
          },
        }),
        components: { counter },
        template: `
        <div class="app">
          <counter></counter>
        </div>`,
      });
    </script>
  </body>
</html>
